<template>
    <div class="item">
         <div class="itemTop">
            <p>{{jobDemands}}</p>
            <p>{{compensation}}薪</p>
        </div>
        <div class="itemCenter">
            <span>{{companyDddress}}</span>
            <span>{{experience}}</span>
            <span>{{education}}</span>
        </div>
        <div class="itemButtom">
            <img :src="Aimg" alt="">
            <p>{{companyName}}</p>
            <p><span>{{enterpriseService}}</span></p>
        </div> 
    </div>
</template>

<script>
    export default{
        name:"SquaredPaper",
        props:{
            jobDemands:{
                // 未传时候的默认值
                default: "1"
            },
            compensation:{
                default: "2"
            },
            companyDddress:{
                default: "3"
            },
            experience:{
                default: "4"
            },
            education:{
                default: "5"
            },
            Aimg:{
                default: "6"
            },
            companyName:{
                default: "7"
            },
            enterpriseService:{
                default: "8"
            }
        }
    }
</script>

<style lang="less">
.item{
    border-radius: 10px;
    width: 30%;
    height: 30%;
    background: #fff;
    display: flex;
    flex-direction: column;
    .itemTop{
        padding: 10px;
        height: 30px;
        display: flex;
        font-size: 12px;
        p:nth-child(1){
            flex: 1;
        }
        p:nth-child(2){
            color: red;
            width: 35%;
        }
    }
    .itemCenter{
        padding: 10px;
        display: flex;
        margin: 10px 0;
        span{
            display: block;
            width: 40px;
            height: 20px;
            margin-left: 10px;
            background: #f8f8f8;
            border-radius: 5px;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
        }
        span:nth-child(1){
            width:130px
        }
    }
    .itemButtom{
        height:80px;
        background: #eef0f5;
        display: flex;
        align-items: center;
        font-size: 10px;
        img{
            margin-left: 10px;
            width: 24px;
            height: 24px;
        }
        p:nth-child(2){
            margin-left: 10px;
            flex: 1;
        }
        p:nth-child(3){
            width: 50%;
            text-align: center;
        }
    }
}
</style>